<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*
盒模型概念：
	 在网页中每个元素都有一个盒模型  
	margin:
		垂直盒子的间距为两个盒子间距的较大值
		水平盒子的间距为两个盒子间距的和
	border:
	padding:
	元素内容主体：
文档流概念：
	就是指在不使用其他与排列和定位相关的特殊CSS规则时，各种元素的排列规则。
	1 文本元素按照从上到下、从左到右的格式布局
	2 块级元素按照从上到下依次排列
	3 内嵌元素按照从左到右依次排列。
	
*/
#abc{
	width: 300px;
	height: 200px;
	background-color: maroon;
	border: 5px  solid green;
/* 	padding-top: 10px;
	padding-left: 15px;
	padding-bottom: 20px;
	padding-right: 25px;  */
	padding: 10px 15px 20px 25px;/*顺时针设置 */
	margin: 10px 10px 10px 10px; 
	border-radius:100px;
	
}
.cba{
	height: 200px;
	background-color: green;
	margin: 20px 20px 20px 20px;
}
img{
	margin: 20px;
}
</style>
</head>
<body>
<div id="abc"></div>
<p>这是一段话</p>
<p>这是一段话</p>
<p>这是一段话</p>
<div class="cba"></div>
<div class="cba"></div>
<div class="cba"></div>
<img alt="" src="photo/b1.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<img alt="" src="photo/b2.jpg">
<div class="cba"></div>
<div class="cba"></div>
<p>这是一段话</p>
<p>这是一段话</p>
这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话这是一段话
</body>
</html>